<template>

	<view style="width: 100%;height: 100%;position: fixed;background-color: rgba(0, 0, 0, 0.5);top: 0;z-index: 999;"
		v-if="showOverlay" @touchmove="hideOverlay" @click="hideOverlay">
		<view class="popup-select" :style="{'top':(offsetY - moreHight) - 5 + 'px'}">
			<!-- <view class="flex-no-horizontal" @click="shareClick">分享</view> -->
			<view class="flex-no-horizontal" @click="specificFunc('appealClick')">举报</view>
			<view class="flex-no-horizontal" @click="specificFunc('shield')">拉黑</view>
			<view class="flex-no-horizontal" @click="specificFunc('hideClick')" v-if="user.position === 2 && !isInHome">
				隐藏
			</view>
			<view class="flex-no-horizontal" @click="specificFunc('greatClick')"
				v-if="user.position === 2 && !isInHome">
				{{record.great?'取消加精':'加精'}}
			</view>
			<view class="flex-no-horizontal" @click="specificFunc('topClick')" v-if="user.position === 2 && !isInHome">
				{{record.top?'取消置顶':'置顶'}}
			</view>
			<view class="flex-no-horizontal" @click="specificFunc('handleDelete')" v-if="record.userId === user.id">
				删除
			</view>
			<view class="flex-no-horizontal" style="border-bottom: 0;" @click="hideOverlay">取消</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			record: {
				type: Object,
				default () {
					return {};
				}
			},
			showOverlay: {
				type: Boolean,
				default () {
					return false;
				}
			},
			offsetY: {
				type: Number,
				default () {
					return 0
				}
			},
			isInHome: {
				type: Boolean,
				default () {
					return false
				}
			}
		},
		watch: {
			record: {
				handler(newValue, oldValue) {
					if (this.isInHome) {
						switch (true) {
							case this.user.id !== this.record.userId:
								this.moreHight = 44.5 * 3
								break;
							case this.user.id === this.record.userId:
								this.moreHight = 44.5 * 4
								break;
							default:
								break;
						}
					} else {
						switch (true) {
							case this.user.position === 2 && this.user.id === this.record.userId:
								this.moreHight = 44.5 * 7
								break;
							case this.user.position === 2 && this.user.id !== this.record.userId:
								this.moreHight = 44.5 * 6
								break;
							case this.user.id !== this.record.userId:
								this.moreHight = 44.5 * 3
								break;
							case this.user.id === this.record.userId:
								this.moreHight = 44.5 * 4
								break;
							default:
								break;
						}

					}
				},
			}
		},
		data() {
			return {
				moreHight: 89,
			}
		},
		created() {

		},
		computed: {
			...mapState({
				user: state => state.userInfo
			})
		},
		methods: {
			hideOverlay() {
				this.$emit('hideOverlay', false)
			},

			specificFunc(e) {
				let data = {
					dynamicId: 'dynamic' + this.record.dynamicId,
					func: e
				}
				this.$emit('specificFunc', data)
			},

		}
	}
</script>

<style lang="scss">
	.popup-select {
		width: 266rpx;
		left: 40rpx;
		position: absolute;
		background-image: url(../../../static/img/dynamic-select-bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);

		view {
			height: 86rpx;
			padding: 0 20rpx;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			justify-content: center;
			border-bottom: 2rpx solid #f0f0f0;
		}

	}
</style>
